<template>
  <div>
    <van-field
      readonly
      clickable
      :value="vModelValue"
      :name="name"
      :label="label"
      :required="required"
      :rules="required ? rules : []"
      :placeholder="placeholder ? placeholder : '请填写' + label"
      right-icon="arrow-down"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker v-model="vModelValue" type="date" title="选择年月日" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script>
import formMixin from './mixin'
import dayjs from 'dayjs'

export default {
  name: 'FormDatetimePicker',
  mixins: [formMixin],
  props: {
    value: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showPicker: false
    }
  },
  computed: {
    vModelValue: {
      get() {
        return this.value
      },
      set(val) {
        if (val) {
          this.$emit('change', dayjs(val).format('YYYY-MM-DD'))
        }
      }
    }
  },
  methods: {
    onConfirm(val) {
      this.$emit('change', dayjs(val).format('YYYY-MM-DD'))
      this.showPicker = false
    }
  }
}
</script>

<style lang="scss" scoped>
.van-radio {
  margin-top: 10px;
}

/deep/ {
  .van-radio__label {
    transition: color 0.5s;
  }
  .van-radio__icon--checked {
    & + .van-radio__label {
      color: #1989fa;
    }
  }
}
</style>
